<template>
    <div id="user">
      <div class="content">
        <!-- 表格页面 -->
        <el-table :data="tableData" style="width: 100%;" class="tableStyle">
            <el-table-column
                prop="logo"
                label="头像"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="age"
                label="年龄">
            </el-table-column>
            <el-table-column
                prop="gender"
                label="性别">
                <template slot="header" >
                  <el-dropdown @command="handleCommand1">
                    <span class="el-dropdown-link">
                      性别<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" >
                      <el-dropdown-item command="male">男</el-dropdown-item>
                      <el-dropdown-item command="female">女</el-dropdown-item>

                      <!-- <el-dropdown-item >女</el-dropdown-item>                      -->
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
            </el-table-column>           
            <el-table-column
                prop="tel"
                label="联系方式">
            </el-table-column>
            <el-table-column
                prop="character"
                label="角色">
                <template slot="header" >
                  <el-dropdown @command="handleCommand2">
                    <span class="el-dropdown-link">
                      角色<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" >
                      <el-dropdown-item command="manager">管理员</el-dropdown-item>
                      <el-dropdown-item command="drugManagement">药品管理</el-dropdown-item>
                      <el-dropdown-item command="orderManagement">订单管理</el-dropdown-item>                     
                      <el-dropdown-item command="suplier">供应商管理</el-dropdown-item>                     
                      <el-dropdown-item command="purchaseManagement">进货管理</el-dropdown-item>                     
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
            </el-table-column>
            <el-table-column
                prop="others"
                label="备注">
            </el-table-column>
            <el-table-column width="200px" label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
        <div class="bottom">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
          </el-pagination>
        </div>
      </div>        
    </div>
</template>
<script>
    export default {
      data() {
        return {
          //表格数据 
          tableData: [{
            id: '1',
            logo: '1',
            name: '王小虎',
            age: '20',
            gender: '男',
            tel: '1111111',
            character: '管理员',
            others: '无',
            op: '修改'
          }, {
            id: '2',
            logo: '1',
            name: '王小虎',
            age: '20',
            gender: '女',
            tel: '111111',
            character: '药品管理',
            others: '无',
            op: '修改'
          }, {
            id: '3',
            logo: '1',
            name: '王小虎',
            age: '20',
            gender: '女',
            tel: '111111',
            character: '订单管理',
            others: '无',
            op: '修改'
          }, {
            id: '4',
            logo: '1',
            name: '王小虎',
            age: '20',
            gender: '男',
            tel: '111111',
            character: '供应商管理',
            others: '无',
            op: '修改'
          }, {
            id: '5',
            logo: '1',
            name: '王小虎',
            age: '20',
            gender: '男',
            tel: '111111',
            character: '进货管理',
            others: '无',
            op: '修改'
          }]
        }
      },
      methods:{
        // 表格中的修改和删除方法
        handleEdit(index, row) {
          this.$router.push("/UserManagement/User/UserModify")
      },
      handleDelete(id) {
          this.$confirm('你确定要删除此数据吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.tableData = this.tableData.filter(item => item.id != id);
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
      // 下拉菜单方法
        handleCommand1(command) {
          if(command === 'male') {
            this.tableData = this.tableData.filter(item => item.gender === "男")
          }
          if(command === 'female') {
            this.tableData = this.tableData.filter(item => item.gender === "女")
          }
          // this.$message('click on item ' + command);
        },
        handleCommand2(command) {
          if(command === 'manager') {
            this.tableData = this.tableData.filter(item => item.character === "管理员")
          }
          if(command === 'drugManagement') {
            this.tableData = this.tableData.filter(item => item.character === "药品管理")
          }
          if(command === 'orderManagement') {
            this.tableData = this.tableData.filter(item => item.character === "订单管理")
          }
          if(command === 'suplier') {
            this.tableData = this.tableData.filter(item => item.character === "供应商管理")
          }
          if(command === 'purchaseManagement') {
            this.tableData = this.tableData.filter(item => item.character === "进货管理")
          }
      }
    }
  }
</script>

<style lang="less">
  #user {
    // height: 100%;
    .content {
      height: 100%;
      margin-top: 30px;
      margin-left: 30px;
      margin-right: 30px;
      .tableStyle {
        background-color: #e4f4fe;
      }
      th.el-table__cell {
        background-color: #e4f4fe;
      }
      .el-table__body {
        -webkit-border-vertical-spacing: 20px;
      }
      td.el-table__cell {
        // background-color: #e4f4fe;
      }
    }
   }
  
</style>